<template>
  <view class="content">
    <view class="bgc-img">
      <img src="../static/login.png">
    </view>
    <view class="title">{{title}}</view>
    <form @submit="formSubmit" @reset="formReset" >
      <view class="password" v-for="item in box">
        <view class="title1">{{ item.name }}</view>
        <input class="uni-input" :placeholder=item.placeholder />
      </view>
      <view class="remarks">
        <view>{{remark}}</view>
        <view @click="showPopUp">忘记密码？</view>
      </view>
      <view class="agree">
        <checkbox-group name="checkbox">
          <label class="agree1">
            <checkbox value="checkbox"/>
          </label>
        </checkbox-group>
        <text>我已经阅读并接受</text>
        <text @click="toPrivacy">用户使用协议</text>
      </view>
      <view class="btn">
        <button form-type="submit" class="login">使用微信登录</button>
        <button type="default" form-type="reset">重置</button>
      </view>
    </form>
    <view class="explain">{{explain}}</view>

    <!--模态层-->
    <!--    传递PopUpDetail数据和closePoPUp方法给子组件-->
    <Popup :PopUpDetail=PopUpDetail @closePopUp="closePopUp" :isShowPopUp=isShowPopUp></Popup>
    <view class="Development-model" v-show="isShowPopUp"></view>
  </view>
</template>

<script>
import Popup from "@/components/Popup";

export default {
  name: "login",
  components:{
    Popup
  },
  data(){
    return{
      title:'欢迎使用We武院',
      PopUpDetail:'目前小程序不支持重置密码，如忘记密码，可至教务处官网处理！',
      isShowPopUp:false,
      box:[
        {
          name:'学号',
          placeholder:'请输入你的学号',
        },
        {
          name:'密码',
          placeholder:'请输入你的教务网密码',
        },
      ],
      remark:'备注：已对接新教务处系统，初始密码与学号一致',
      explain:'武院校园菌校园生活一站式平台',
    }
  },
  methods:{
    showPopUp(){
      this.isShowPopUp=true;
    },
    closePopUp(data){
      this.isShowPopUp=data;
    },
    toPrivacy(){
      uni.navigateTo({
        url:'../pages/My/components/Privacy'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100vh;
  .bgc-img{
    width: 100%;
    height: 400rpx;
    background-image:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
    img{
      width: 100%;
      height: 100%;
    }
  }
  .title{
    font-family: "Yuanti SC" ;
    font-size: 50rpx;
    text-shadow: 20rpx -10rpx 1rpx #ddd;
    margin: 0 30rpx 40rpx;
  }
  .password{
    width: 85%;
    margin: 40rpx auto;
    height: 150rpx;
    background-color: #F8F6FC;
    padding: 20rpx ;
    border-radius: 10rpx;
    .title1{
      font-family: "Yuanti SC" ;
    }
    .uni-input{
      height: 80rpx;
    }
  }
  .remarks{
    width: 85%;
    margin: 20rpx auto;
    height: 110rpx;
    position:relative;
    :nth-child(1){
      word-spacing: -6rpx;
      font-family: "Yuanti SC";
      font-size: 20rpx;
    }
    :nth-child(2){
      position: absolute;
      bottom: 0;
      right: 0;
      color: #4399FC;
    }
  }
  .agree{
    width: 85%;
    margin: 20rpx auto;
    height: 40rpx;
    display: flex;
    align-items: center;
    .agree1{
      :nth-child(1){
      zoom:90%;
      padding: 0;
      border-radius: 50%;
    }
    }
    :nth-child(3){
      color: #096DD9;
    }
  }
  .btn{
    width: 85%;
    margin: 40rpx auto;
    //height: 40rpx;
    .login{
      border-radius: 50rpx;
      background-color: #FA436A;
      color: #FFFFFF;
      margin-bottom: 10rpx;
    }
    :nth-child(2){
      border-radius: 50rpx;
      background-color: #E6E6E6;
      margin-bottom: 10rpx;
      color: #616161;
      }
  }
  .explain{
    width: 85%;
    margin: 40rpx auto;
    text-align: center;
    color: #8C8C8C;
    font-family: "Yuanti SC";
    font-size: 20rpx;
  }
  .Development-model{
    z-index: 2000;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }
}
</style>
